<template>
  <el-row :gutter="3" class="w-full h-full">
    <el-col :span="9">
      <div style="height: 45%">
        <dv-border-box12 class="p-2" :color="['#6e87a4', '#40c3c8']">
          <el-row>
            <el-col :span="12">
              <PatientRegister class="w-11 h-11 mx-6 mt-6" />
            </el-col>
            <el-col :span="12" class="pt-3.5">
              <span class="text-lg">
                {{ data.registerTitle }}
                <span class="text-3xl">{{ data.registerValue }}</span>
              </span>
            </el-col>
          </el-row>
        </dv-border-box12>
      </div>
      <div style="height: 45%">
        <dv-border-box12 class="p-2" :color="['#6e87a4', '#40c3c8']">
          <el-row>
            <el-col :span="12">
              <PatientVisit class="w-12 h-12 mx-6 mt-6" />
            </el-col>
            <el-col :span="12" class="pt-3.5">
              <span class="text-lg">
                {{ data.visitTitle }}
                <span class="text-3xl">{{ data.visitValue }}</span>
              </span>
            </el-col>
          </el-row>
        </dv-border-box12>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="w-full h-full man-body cursor-pointer" @click="goToPatientAnalyse" />
    </el-col>
    <el-col :span="9">
      <div style="height: 45%">
        <dv-border-box12 class="p-2" :color="['#6e87a4', '#40c3c8']">
          <el-row>
            <el-col :span="12">
              <PatientFirstVisit class="w-12 h-12 mx-6 mt-6" />
            </el-col>
            <el-col :span="12" class="pt-3.5">
              <span class="text-lg">
                {{ data.firstVisitTitle }}
                <span class="text-3xl">{{ data.firstVisitValue }}</span>
              </span>
            </el-col>
          </el-row>
        </dv-border-box12>
      </div>
      <div style="height: 45%">
        <dv-border-box12 class="p-2" :color="['#6e87a4', '#40c3c8']">
          <el-row>
            <el-col :span="12">
              <PatientSecondVisit class="w-12 h-12 mx-6 mt-6" />
            </el-col>
            <el-col :span="12" class="pt-3.5">
              <span class="text-lg">
                {{ data.secondVisitTitle }}
                <span class="text-3xl">{{ data.secondVisitValue }}</span>
              </span>
            </el-col>
          </el-row>
        </dv-border-box12>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { ref, defineProps } from "vue";
import PatientRegister from "@/assets/svg/patient_register.svg?component";
import PatientVisit from "@/assets/svg/patient_visit.svg?component";
import PatientFirstVisit from "@/assets/svg/patient_first.svg?component";
import PatientSecondVisit from "@/assets/svg/patient_second.svg?component";

const props = defineProps({
  data: Object
});
const data = props.data;

// 路由跳转
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const goToPatientAnalyse = () => {
  router.push({
    name: "PatientAnalyse",
    params: {}
  });
};
</script>

<style scoped lang="scss"></style>
